<template>
  <uni-popup
    ref="popupRef"
    :is-mask-click="false"
    mask-background-color="rgba(0,0,0,0.15)"
    @change="onShowChange"
  >
    <div class="wrapper">
      <!-- 标题插槽 -->
      <slot name="header">
        <div class="header">
          {{ title }}
        </div>
      </slot>
      <!-- 默认插槽 -->
      <slot></slot>
      <!-- 底部插槽 -->
      <slot name="footer">
        <div class="footer">
          <div class="btn" hover-class="btn-hover" @click="onCancel">
            取消
          </div>
          <div class="btn" hover-class="btn-hover" @click="onConfirm">
            确定
          </div>
        </div>
      </slot>
    </div>
  </uni-popup>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '默认弹窗标题',
    },
  },
  emits: ['cancel', 'confirm'],
  data() {
    return {}
  },
  watch: {
    show(newVal) {
      if (newVal) {
        this.$refs.popupRef.open()
      } else {
        this.$refs.popupRef.close()
      }
    },
  },
  methods: {
    onShowChange({ show }) {
      this.$emit('update:show', show)
    },
    onCancel() {
      this.$emit('cancel')
    },
    onConfirm() {
      this.$emit('confirm')
    },
  },
}
</script>

<style lang="scss" scoped>
.wrapper {
  background-color: #fff;
  border-radius: 5px;
  width: 80vw;
  overflow: hidden;
  margin-top: -30%;
  padding: 0 10px;

  .header {
    font-size: 20px;
    padding: 15px 0 10px;
    text-align: center;
  }

  .footer {
    display: flex;
    color: $uni-color-primary;
    font-size: 18px;
    .btn {
      flex: 1;
      padding: 15px 0;
      text-align: center;
      &:first-child {
        border-right: 1px solid #efefef;
      }

      &.btn-hover {
        color: blue;
        background-color: rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>
